<template>
  <div class="content-center-wrap">
    <div class="content-body">
      <div class="top-wrap">
        <Card :bordered="false">
          <div class="filter-wrap" slot="title">
            <span class="collapse-left-icon collapse-icon" @click="handlerCollapse('left')">
              <span v-if="collapseLeftFlag" title="缩小">
                <Icon type="icon iconfont icon-xianghou" />
              </span>
              <span v-else title="放大">
                <Icon type="icon iconfont icon-xiangqian" />
              </span>
            </span>
            <DatePicker
              transfer
              clearable
              :disabled="!currentMeterId"
              type="daterange"
              show-week-numbers
              placement="bottom-end"
              placeholder="选择日期"
              size="small"
              split-panels
              v-model="rangeDate"
              @on-change="changeDate"
              v-show="!showQNYQFX"
            />
            <DatePicker
              type="year"
              placeholder="选择年份"
              clearable
              size="small"
              v-model="year"
              v-show="showQNYQFX"
              @on-change="changeYear"
            />
            <span class="collapse-right-icon collapse-icon" @click="handlerCollapse('right')">
              <span v-if="collapseRightFlag" title="缩小">
                <Icon type="icon iconfont icon-xiangqian" />
              </span>
              <span v-else title="放大">
                <Icon type="icon iconfont icon-xianghou" />
              </span>
            </span>
          </div>
          <center-top />
        </Card>
      </div>
      <div class="bottom-wrap">
        <div class="left-wrap">
          <Card :bordered="false">
            <div slot="title">
              <Select
                size="small"
                style="width:160px;margin-right: 10px;text-align:left;"
                placeholder="请选择类型"
                :disabled="!currentMeterId"
                @on-change="handleChangeType"
              >
                <Option v-for="item of selectType" :key="item.value" :value="item.value">{{ item.name }}</Option>
              </Select>
              <Button
                size="small"
                type="info"
                v-show="showParseBtn"
                :loading="centerBottomChartLoading"
                @click="handleParse"
                >分析</Button
              >
            </div>
            <center-bottom />
          </Card>
        </div>
        <div class="right-wrap" v-show="showBottomRightWrap">
          <center-bottom-right />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { createNamespacedHelpers } from 'vuex'
import CenterTop from '../CenterTop'
import CenterBottom from '../CenterBottom'
import CenterBottomRight from '../CenterBottomRight'
const { mapActions, mapState } = createNamespacedHelpers('tablesDay')

export default {
  name: 'tables-day-center',
  components: {
    CenterTop,
    CenterBottom,
    CenterBottomRight
  },
  computed: {
    ...mapState(['currentMeterId', 'collapseLeftFlag', 'collapseRightFlag', 'selecteType', 'centerBottomChartLoading']),
    showBottomRightWrap() {
      return this.selecteType === 'zqfx'
    },
    showParseBtn() {
      return this.currentMeterId && this.selecteType && this.selecteType !== 'qnyqfx'
    },
    showQNYQFX() {
      return this.selecteType === 'qnyqfx'
    }
  },
  data() {
    return {
      selectType: Object.freeze([
        {
          name: '日用气统计',
          value: 'ryqtj'
        },
        {
          name: '周期分析',
          value: 'zqfx'
        },
        {
          name: '全年零用气分析',
          value: 'qnyqfx'
        }
      ]),
      rangeDate: undefined,
      year: undefined
    }
  },
  watch: {
    selecteType(newData, oldData) {
      if (oldData === 'qnyqfx') {
        const [startTime, endTime] = this.rangeDate
        this.clearCenterTopCandData()
        this.loadCenterTopCandData({
          startTime: startTime ? dayjs(startTime).format('YYYY-MM-DD') : undefined,
          endTime: endTime ? dayjs(endTime).format('YYYY-MM-DD') : undefined
        })
      }
    }
  },
  methods: {
    ...mapActions([
      'changeCollapse',
      'changeSelectType',
      'loadDataBySelectType',
      'changeDefaultDate',
      'changeStartAndEndTime',
      'loadCenterTopCandData',
      'clearCenterTopCandData',
      'loadQNYQFXData',
      'changeSelecteYear'
    ]),
    handlerCollapse(arg) {
      if (arg === 'left') {
        this.changeCollapse({
          type: arg,
          status: !this.collapseLeftFlag
        })
      } else if (arg === 'right') {
        this.changeCollapse({
          type: arg,
          status: !this.collapseRightFlag
        })
      }
    },
    /**
     * desc: 选择分类
     * param {type}
     * return {type} void
     */
    handleChangeType(val) {
      this.changeSelectType(val)
      if (val === 'qnyqfx') {
        this.loadDataBySelectType({
          year: this.year ? dayjs(this.year).format('YYYY') : undefined
        })
      } else {
        this.loadDataBySelectType()
      }
    },
    changeDate(date) {
      this.changeStartAndEndTime(date)
      this.clearCenterTopCandData()
      const [startTime, endTime] = date
      if (!startTime || !endTime) {
        this.changeDefaultDate(undefined)
      }
      this.loadCenterTopCandData({
        startTime: startTime || undefined,
        endTime: endTime || undefined
      })
    },
    handleParse() {
      this.loadDataBySelectType()
    },
    changeYear(year) {
      this.changeSelecteYear(year)
      this.loadQNYQFXData({
        year: year || undefined
      })
    }
  }
}
</script>
<style lang="less" scoped>
.content-center-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .filter-wrap {
    position: relative;
    text-align: center;
    border-bottom: none;
  }

  .collapse-icon {
    position: absolute;
    top: 0;
    cursor: pointer;
  }

  .collapse-left-icon {
    left: 0;
  }

  .collapse-right-icon {
    right: 0;
  }

  .content-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .top-wrap,
  .bottom-wrap {
    flex: 1;
    overflow: hidden;
  }
  .top-wrap {
    margin-bottom: 10px;
  }
  .bottom-wrap {
    display: flex;
    flex-direction: row;

    .left-wrap,
    .right-wrap {
      flex: 1;
    }

    .right-wrap {
      margin-left: 10px;
    }
  }
}
</style>
